<template>
	<view class="recommend-page">
		<!-- 头部标题 -->
		<view class="page-header">
			<text class="title">景点推荐</text>
		</view>

		<!-- 协同过滤推荐 -->
		<view class="section" v-if="isLogin">
			<view class="section-header">
				<view class="header-left">
					<text class="section-title">猜你喜欢</text>
					<text class="section-subtitle">基于您的兴趣推荐</text>
				</view>
				<view class="refresh-btn" @click="refreshRecommendation('cf')">
					<text>换一批</text>
					<el-icon :size="14" color="#1890ff">
						<Refresh />
					</el-icon>
				</view>
			</view>
			<scroll-view class="card-scroll" scroll-x="true">
				<view class="card-container">
					<travel-card v-for="item in cfRecommendations" v-bind="item" :tags="['热门', '必去']" type="expense"
						@click="goToDetail(item.attractionId)" class="card-item" />
				</view>
			</scroll-view>
		</view>

		<!-- 评论数排行 -->
		<view class="section">
			<view class="section-header">
				<view class="header-left">
					<text class="section-title">热门景点</text>
					<text class="section-subtitle">评论数最多</text>
				</view>
				<view class="refresh-btn" @click="refreshRecommendation('review')">
					<text>换一批</text>
					<el-icon :size="14" color="#1890ff">
						<Refresh />
					</el-icon>
				</view>
			</view>
			<scroll-view class="card-scroll" scroll-x="true">
				<view class="card-container">
					<travel-card v-for="item in reviewCountRank" type="experience" v-bind="item" :tags="['热门', '高评价']"
						@click="goToDetail(item.attractionId)" class="card-item" />
				</view>
			</scroll-view>
		</view>

		<!-- 收藏量排行 -->
		<view class="section">
			<view class="section-header">
				<view class="header-left">
					<text class="section-title">人气景点</text>
					<text class="section-subtitle">收藏量最高</text>
				</view>
				<view class="refresh-btn" @click="refreshRecommendation('collection')">
					<text>换一批</text>
					<el-icon :size="14" color="#1890ff">
						<Refresh />
					</el-icon>
				</view>
			</view>
			<scroll-view class="card-scroll" scroll-x="true">
				<view class="card-container">
					<travel-card v-for="item in collectionRank" type="experience" v-bind="item" :tags="['人气', '推荐']"
						@click="goToDetail(item.attractionId)" class="card-item" />
				</view>
			</scroll-view>
		</view>

		<!-- 浏览量排行 -->
		<view class="section">
			<view class="section-header">
				<view class="header-left">
					<text class="section-title">热门浏览</text>
					<text class="section-subtitle">浏览量最多</text>
				</view>
				<view class="refresh-btn" @click="refreshRecommendation('view')">
					<text>换一批</text>
					<el-icon :size="14" color="#1890ff">
						<Refresh />
					</el-icon>
				</view>
			</view>
			<scroll-view class="card-scroll" scroll-x="true">
				<view class="card-container">
					<travel-card v-for="item in viewCountRank" type="question" v-bind="item" :tags="['热门', '浏览']"
						@click="goToDetail(item.attractionId)" class="card-item" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>


<script>
	import TravelCard from '../index/comment/travelCard.vue';
	// import UniIcons from '@/components/uni-icons/uni-icons.vue';
	import {
		Refresh
	} from '@element-plus/icons-vue';
	import {
		ElIcon,
		ElMessage
	} from 'element-plus';
	import {
		getParams
	} from '@/axios/http';

	export default {
		components: {
			TravelCard,
			ElIcon,
			Refresh
		},
		data() {
			return {
				attractions: [], // 原始景点数据
				cfRecommendations: [], // 协同过滤推荐
				reviewCountRank: [], // 评论数排行
				collectionRank: [], // 收藏量排行
				viewCountRank: [], // 浏览量排行
				isNavigating: false, // 添加跳转锁
				currentPage: { //当前各推荐页面的页码，目前尚未具体使用，可做后期扩展
					cf: 1,
					review: 1,
					collection: 1,
					view: 1
				},
				currentInfo: {
					cf: { //协同过滤根据用户行为
						lastId: 1, //最后一项的id
						limit: 4 //分页长度
					},
					review: { //根据评论数推荐
						lastId: 1, //最后一项的id
						limit: 4 //分页长度
					},
					collection: { //收藏量推荐
						lastId: 1, //最后一项的id
						limit: 4 //分页长度
					},
					view: { //浏览量推荐
						lastId: 1, //最后一项的id
						limit: 4 //分页长度
					},
				},
				isLogin:false,
			}
		},
		onLoad() {
			this.setRankData('review');
			this.setRankData('collection');
			this.setRankData('view');
			//用户已登录则开启协同过滤算法推荐
			//协同过滤算法推荐
			if(uni.getStorageSync('LoginUser')){
				this.setCfRecommendations();
			}
			
		},
		onShow() {
			// console.log("onShow调用了")
			if(!uni.getStorageSync('LoginUser')){
				console.error("用户未登录,不展示协同过滤算法推荐")
				this.isLogin = false;
				return;
			}else{
				this.isLogin = true;
			}
			
		},
		methods: {

			//设置协同过滤算法返回的数据
			async setCfRecommendations() {
				if (!uni.getStorageSync('LoginUser')) {
					console.log("用户未登录")
					//默认按浏览量推荐
					// this.setRankData('view');
					return;
				}
				let data = {
					userId: uni.getStorageSync('LoginUser').userId,
					lastId: this.currentInfo.cf.lastId,
					limit: this.currentInfo.cf.limit
				}
				// console.log("发起请求的数据", data)
				try {
					const response = await getParams('recommendByCF', data);
					// console.log("返回的数据", response)

					// 检查response是否存在
					if (!response) {
						throw new Error("未获取到有效响应");
					}
					// 检查response.data是否存在
					if (!response.data) {
						throw new Error("响应数据为空");
					}

					if (response.status === 200) {
						if (response.data.count === 0) {
							console.log("没有更多数据了");
							ElMessage({
								message: '没有更多数据了',
								type: 'warning',
								offset: 250,
							})
							return;
						}

						// 检查attractions是否存在且是数组
						if (!response.data.attractions || !Array.isArray(response.data.attractions)) {
							throw new Error("返回的景点数据格式不正确");
						}

						// 检查attractions数组是否为空
						if (response.data.attractions.length === 0) {
							console.log("返回的景点列表为空");
							// this.$toast("没有找到景点数据");
							ElMessage({
								message: '没有找到景点数据',
								type: 'warning',
								offset: 250,
							})
							return;
						}
						// 找出数组中最大的attractionId
						const maxId = Math.max(...response.data.attractions.map(item => {
							if (typeof item.attractionId !== 'number') {
								throw new Error(`无效的attractionId: ${item.attractionId}`);
							}
							return item.attractionId;
						}));

						// 更新对应type的lastId为最大ID加1
						this.currentInfo.cf.lastId = maxId + 1;

						// 更新对应的page计数器
						this.currentPage.cf += 1;

						// 更新对应的数组
						this.cfRecommendations = response.data.attractions;
						// console.log("更新后的cf：",this.currentInfo.cf)
					} else {
						// 处理非200状态码
						console.error("请求失败，状态码:", response.status);
						const errorMsg = response.data?.message || response.statusText || '未知错误';
						// this.$toast(`请求失败: ${errorMsg}`);
						ElMessage.error('请求失败:' + errorMsg)
					}
				} catch (error) {
					console.error(`setRankDataCF发生错误:`, error);
					// this.$toast(error.message || `获取${type}排行失败`);
					ElMessage.error(error.message || `获取cf排行失败`)


					// 如果是特定类型的错误，可以特殊处理
					if (error.response) {
						// 处理HTTP错误响应
						console.error("错误响应数据:", error.response.data);
					} else if (error.request) {
						// 请求已发出但没有收到响应
						console.error("没有收到响应:", error.request);
					} else if (error.message.includes('无效的attractionId')) {
						// 专门处理ID无效的情况
						// this.$toast("数据格式错误: 景点ID无效");
						ElMessage.error('数据格式错误: 景点ID无效')
					}
				}


			},

			//设置评论，收藏，以及浏览量排行返回的数据
			async setRankData(type) {
				try {
					// 验证type参数是否有效
					const validTypes = ['review', 'collection', 'view'];
					if (!validTypes.includes(type)) {
						throw new Error(`无效的类型参数: ${type}`);
					}

					// console.log(`当前${type}的info：`, this.currentInfo[type]);

					// 根据type确定请求URL
					const urlMap = {
						review: '/recommendByComments',
						collection: '/recommendByCollections',
						view: '/recommendByViews'
					};
					const requestUrl = urlMap[type];

					// 检查currentInfo和对应type的属性是否存在
					if (!this.currentInfo || !this.currentInfo[type]) {
						throw new Error(`currentInfo.${type} 未定义`);
					}

					const response = await getParams(requestUrl, this.currentInfo[type]);
					// console.log(`测试根据${type}返回的推荐列表：`, response);

					// 检查response是否存在
					if (!response) {
						throw new Error("未获取到有效响应");
					}

					// 检查response.data是否存在
					if (!response.data) {
						throw new Error("响应数据为空");
					}

					if (response.status === 200) {
						if (response.data.count === 0) {
							console.log("没有更多数据了");
							ElMessage({
								message: '没有更多数据了',
								type: 'warning',
								offset: 250,
							})
							return;
						}

						// 检查attractions是否存在且是数组
						if (!response.data.attractions || !Array.isArray(response.data.attractions)) {
							throw new Error("返回的景点数据格式不正确");
						}

						// 检查attractions数组是否为空
						if (response.data.attractions.length === 0) {
							console.log("返回的景点列表为空");
							// this.$toast("没有找到景点数据");
							ElMessage({
								message: '没有找到景点数据',
								type: 'warning',
								offset: 250,
							})
							return;
						}

						// 找出数组中最大的attractionId
						const maxId = Math.max(...response.data.attractions.map(item => {
							if (typeof item.attractionId !== 'number') {
								throw new Error(`无效的attractionId: ${item.attractionId}`);
							}
							return item.attractionId;
						}));

						// 更新对应type的lastId为最大ID加1
						this.currentInfo[type].lastId = maxId + 1;

						// 更新对应的page计数器
						this.currentPage[type] += 1;

						// 更新对应的数组
						const rankMap = {
							review: 'reviewCountRank',
							collection: 'collectionRank',
							view: 'viewCountRank'
						};
						this[rankMap[type]] = response.data.attractions;

						// console.log(`更新${type}的lastId为: ${this.currentInfo[type].lastId}`);
					} else {
						// 处理非200状态码
						console.error("请求失败，状态码:", response.status);
						const errorMsg = response.data?.message || response.statusText || '未知错误';
						// this.$toast(`请求失败: ${errorMsg}`);
						ElMessage.error('请求失败:' + errorMsg)
					}
				} catch (error) {
					console.error(`setRankData(${type})发生错误:`, error);
					// this.$toast(error.message || `获取${type}排行失败`);
					ElMessage.error(error.message || `获取${type}排行失败`)


					// 如果是特定类型的错误，可以特殊处理
					if (error.response) {
						// 处理HTTP错误响应
						console.error("错误响应数据:", error.response.data);
					} else if (error.request) {
						// 请求已发出但没有收到响应
						console.error("没有收到响应:", error.request);
					} else if (error.message.includes('无效的attractionId')) {
						// 专门处理ID无效的情况
						// this.$toast("数据格式错误: 景点ID无效");
						ElMessage.error('数据格式错误: 景点ID无效')
					}
				}
			},
			// 刷新推荐内容 点击不同的换一批对应的修改数据
			refreshRecommendation(type) {
				this.currentPage[type]++;

				// 模拟从服务器获取新一批数据
				// 实际开发中应该发送分页请求
				const allData = [...this.attractions];
				const pageSize = 4;

				switch (type) {
					case 'cf':
						this.setCfRecommendations();
						break;

					default:
						this.setRankData(type);
						break;
				}
			},

			goToDetail(id) {

				if (this.isNavigating) return;
				this.isNavigating = true;
				uni.navigateTo({
					url: `/pages/attractionInfo/attractionInfo?id=${id} `,
					complete: () => { //跳转锁
						this.isNavigating = false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.recommend-page {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.page-header {
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.section {
		margin-bottom: 40rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 不加换一批 */
	/* 	.section-header {
		margin-bottom: 20rpx;
	}
	

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 16rpx;
	}

	.section-subtitle {
		font-size: 24rpx;
		color: #999;
	} */
	/* 加上换一批 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.header-left {
		display: flex;
		flex-direction: column;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 16rpx;
	}

	.section-subtitle {
		font-size: 24rpx;
		color: #999;
	}

	.refresh-btn {
		display: flex;
		align-items: center;
		color: #1890ff;
		font-size: 24rpx;
	}

	.refresh-btn text {
		margin-right: 8rpx;
	}






	.card-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.card-container {
		display: inline-flex;
	}

	.card-item {
		width: 340rpx;
		margin-right: 20rpx;
		display: inline-block;
	}
</style>